/**
* @description: 通信机房出入工单——去执行/去审批/审批拒绝详情/审批通过详情/已完成详情
* @author: JiWei
* @date:
**/
<template>
  <view class="task-monitor-main">
    <nav-bar class="header" back :title="stateName" @goBack="goBack"/>
    <!-- banner -->
    <view class="top-banner">
      <view class="left-banner">
        <text class="left-banner-title">{{ formData.updateName }}发起的通信机房出入工单</text>
        <text class="left-banner-time">{{formData.updateTime}}</text>
      </view>
      <view :class="stateColor">{{stateName}}</view>
    </view>
    <!-- main   -->
    <main :class="{'mainHeight': (stateName !=='待审批') && (stateName !=='待执行')}">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title" />
      <view class="main-top">
        <van-field v-model="formData.mantleName" label="作业负责人" readonly error-message-align="right"  input-align="right"/>
        <van-field v-model="formData.guardianName" label="作业监护人" readonly error-message-align="right"  input-align="right"/>
      </view>
      <plateTitle title="操作人员" :isRequired="false" class="plate-title" />
      <view class="main-top">
        <van-field v-model="formData.memberName" label="班组成员" readonly error-message-align="right"  input-align="right"/>
        <van-field label="其他单位人员" readonly error-message-align="right" />
      </view>
      <view class="operation-info-container">
        <view class="task-assignment-item" v-for="(typeItem, typeIndex) in typeColumns" :key="typeIndex">
          <van-collapse v-model="activeName">
            <van-collapse-item :name="typeItem.name" size="large">
              <template #title>
                <view class="custom-title">
                  {{ typeItem.type }}
                </view>
              </template>
              <van-field input-align="right" v-model="typeItem.userName" label="姓名" readonly error-message-align="right" />
              <van-field input-align="right" v-model="typeItem.unitName" label="单位名称" readonly error-message-align="right" />
              <van-field input-align="right" v-model="typeItem.phone" label="联系方式" readonly error-message-align="right" />
              <van-field input-align="right" v-model="typeItem.idNumber" label="身份证号" readonly error-message-align="right" />
            </van-collapse-item>
          </van-collapse>
        </view>
      </view>
      <plateTitle title="工作情况" :isRequired="false" class="plate-title" />
      <view class="operation-info-container">
        <view class="task-assignment-item" v-for="(typeItem, typeIndex) in workColumns" :key="typeIndex">
          <van-collapse v-model="activeNames">
            <van-collapse-item :name="typeItem.name" size="large">
              <template #title>
                <view class="custom-title">
                  {{ typeItem.type }}
                </view>
              </template>
              <view class="work-info-container">
                <view class="work-title">工作内容</view>
                <van-divider dashed />
                <view class="work-wrap">
                  <textarea class="remark-text" disabled v-model="typeItem.workContent" placeholder="这里是工作内容信息"/>
                </view>
              </view>
              <view class="line"/>
                <van-field v-model="typeItem.planIntoTime" input-align="right" label="计划进入时间" readonly error-message-align="right" />
                <van-field v-model="typeItem.planLeaveTime" input-align="right" label="计划离开时间" readonly error-message-align="right" />
                <van-field input-align="right" v-model="typeItem.floorName" label="工作楼层" readonly error-message-align="right" />
                <van-field input-align="right" v-model="typeItem.motorRoomName" label="机房编号" readonly error-message-align="right" />
                <van-field input-align="right" v-model="typeItem.screenPosition" label="工作屏位" readonly error-message-align="right" />
                <van-field input-align="right" v-model="typeItem.deviceName" label="设备名称" readonly error-message-align="right" />
            </van-collapse-item>
          </van-collapse>
        </view>
      </view>
<!--      <plateTitle title="位置情况" :isRequired="false" class="plate-title" />-->
<!--      <view class="operation-info-container">-->
<!--        <view class="task-assignment-item" v-for="(typeItem, typeIndex) in positionColumns" :key="typeIndex">-->
<!--          <van-collapse v-model="posActiveNames">-->
<!--            <van-collapse-item :name="typeItem.name" size="large">-->
<!--              <template #title>-->
<!--                <view class="custom-title">-->
<!--                  {{ typeItem.type }}-->
<!--                </view>-->
<!--              </template>-->
<!--              <van-field input-align="right" v-model="typeItem.floorName" label="工作楼层" readonly error-message-align="right" />-->
<!--              <van-field input-align="right" v-model="typeItem.motorRoomName" label="机房编号" readonly error-message-align="right" />-->
<!--              <van-field input-align="right" v-model="typeItem.screenPosition" label="工作屏位" readonly error-message-align="right" />-->
<!--              <van-field input-align="right" v-model="typeItem.deviceName" label="设备名称" readonly error-message-align="right" />-->
<!--            </van-collapse-item>-->
<!--          </van-collapse>-->
<!--        </view>-->
<!--      </view>-->
      <view class="remark-info-container">
        <view>备注</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <textarea class="remark-text" disabled v-model="formData.remarks" placeholder="这里是备注信息"/>
        </div>
      </view>
      <plateTitle title="审批进度" :isRequired="false" class="plate-title" />
      <view class="approval-info-container">
        <van-steps direction="vertical"
                   :active="approvalActive"
                   active-color="#417adc"
                   inactive-color="#417adc"
                   active-icon="circle"
                   inactive-icon="circle">
          <van-step v-for="(item,key) in setpList" :key="key">
            <p><span v-if="item.currentNodeTime">{{ item.currentNodeTime }}</span><span style="color: #417ADC">{{item.currentNodeName}}</span></p>
            <p>
              <span>{{item.currentStatusName}}：{{ item.currentUserName }}</span>
            </p>
            <p class="opinion" v-if="item.currentNodeContent">
              <span>审批意见：</span>
              <span>{{ item.currentNodeContent }}</span>
            </p>
            <p class="opinion" v-if="item.realityIntoTime">
              <span>实际进入时间：</span>
              <span>{{ item.realityIntoTime }}</span>
            </p>
            <p class="opinion" v-if="item.realityLeaveTime">
              <span>实际离开时间：</span>
              <span>{{ item.realityLeaveTime }}</span>
            </p>
          </van-step>
        </van-steps>
      </view>
    </main>
    <!-- footer   -->
    <footer v-if="stateName ==='待审批' || stateName ==='待执行'">
      <van-button block native-type="submit" @click="goApproval">{{buttonText}}</van-button>
    </footer>
    <!-- 弹出审批页 -->
    <van-popup
        closeable
        :close-on-click-overlay="false"
        v-model="showApproval"
        position="bottom"
    >
      <toApprove @submitApproval="submitApproval" :isChangeRadio="isChangeRadio"></toApprove>
    </van-popup>
    <!--  弹出去执行  -->
    <van-popup
        closeable
        :close-on-click-overlay="false"
        v-model="showExecute"
        position="bottom"
    >
      <toExecute @submitExecute="submitExecute" ></toExecute>
    </van-popup>
  </view>
</template>
<script>
import navBar from "../../../components/common/nav-bar";
import plateTitle from '../common/plateTitle.vue'
import toApprove from '../common/toApprove.vue'
import toExecute from '../common/toExecute.vue'
import moment from "moment/moment";
import {Dialog} from "vant";
import {mapGetters} from "vuex";

export default {
  name: 'machineRoomApprove',
  components: { navBar,plateTitle,toApprove,toExecute},
  props: {},
  data() {
    return {
      stateName:'',// banner状态
      stateCode:'1',
      detailId:'',//详情接口传参
	  isChangeRadio:true,
      formData:{
        updateName:'', // 创建人名称
        updateTime:'',//当前操作人时间
        auditStatusName:'',// 当前状态
        mantleName:'',// 作业负责人
        guardianName:'',// 作业监护人
        memberName:'',// 班组成员
        remarks:''
      },
      activeName:['0'], // 控制折叠框是否展开
      activeNames:['0'], // 控制折叠框是否展开
      posActiveNames:['0'], // 控制折叠框是否展开
      typeColumns: [], // 操作人员
      workColumns:[], //工作情况
      // positionColumns:[], // 位置情况
      setpList:[],
      approvalActive: 0,
      showApproval: false, // 展示审批弹窗
      showExecute: false,// 展示去执行
      goBackType:''
    };
  },
  computed: {
    ...mapGetters(['userData']),
  // 实时计算导航标题
    // title() {
    //   if(this.stateName === '待审批') {
    //     return '通信网管出入工单-待审批'
    //   }else if(this.stateName === '待执行'){
    //     return '通信网管出入工单-待执行'
    //   }else if(this.stateName === '已完成'){
    //     return '通信网管出入工单-已完成'
    //   }else if(this.stateName === '审批拒绝'){
    //     return '通信网管出入工单-审批拒绝详情'
    //   }else {
    //     return '通信网管出入工单-审批通过详情'
    //   }
    // },
    // 计算banner框的流程状态
    stateColor() {
      if(this.stateCode === '0') {
        return 'left-state-dsp'
      }else if(this.stateCode === '1') {
        return 'left-state-jj'
      }else if(this.stateCode === '2') {
        return 'left-state-dzx'
      }else if(this.stateCode === '3') {
        return 'left-state-ywc'
      }else {
        return 'left-state-ycx'
      }
    },
    buttonText() {
      if(this.stateName === '待审批') {
        return '审批'
      }else{
        return '处理'
      }
    }
  },
  watch: {},
  onLoad(options) {
    this.goBackType = options.pageType
    this.stateName = options.AUDITSTATUSNAME
    this.detailId = options.ID
	this.stateCode = options.AUDITSTATUS

    this.selectRoomOneD()
  },
  methods: {
    // 获取详情
    selectRoomOneD() {
      let params = {
        machineId: this.detailId
      }
      this.$api.selectRoomOne(params).then(res => {
        this.formData = res.data
        this.formData.updateTime = moment(this.formData.updateTime).format('YYYY-MM-DD HH:mm')
        this.typeColumns = res.data.otherPersonnelVo
        // this.positionColumns = res.data.locationVo
        this.workColumns = res.data.workSituationVo.map(item => {
          item.planIntoTime = moment(item.planIntoTime).format('YYYY-MM-DD HH:mm')
          item.planLeaveTime = moment(item.planLeaveTime).format('YYYY-MM-DD HH:mm')
          return {...item}
        })
        this.setpList = res.data.approvalVo.map(item => {
          item.currentNodeTime = item.currentNodeTime ? moment(item.currentNodeTime).format('YYYY-MM-DD HH:mm'):''
          item.realityIntoTime = item.realityIntoTime ? moment(item.realityIntoTime).format('YYYY-MM-DD HH:mm'):''
          item.realityLeaveTime = item.realityLeaveTime ? moment(item.realityLeaveTime).format('YYYY-MM-DD HH:mm'):''
          return {...item}
        })
        this.approvalActive = res.data.currNode
      })
    },
    goBack() {
      // if(this.goBackType === 'order') {
      //   uni.navigateTo({
      //     url: '/pages/operationApprove/workOrderRecord/workOrderRecord'
      //   })
      // }else {
      //   uni.navigateTo({
      //     url: '/pages/operationApprove/todoOrder/todoOrder'
      //   })
      // }
	  uni.navigateBack()
    },
    goApproval() {
      if(this.stateName === '待审批') {
        this.showApproval = true;
      }else {
        this.showExecute = true;
      }

    },
    //  去审批
    submitApproval(approval) {
      let params = {
        auditUid:this.userData.USERID,
        auditName:this.userData.SUERNAME,
        machineId:this.detailId,
        content:approval.determineResult,
        auditStatus:approval.radio
      }
      Dialog.confirm({
        message:'是否确认审批'
      }).then(() => {
        this.$api.process(params).then(res => {
          if(res.code == 0) {
            // uni.navigateTo({
            //   url: `/pages/operationApprove/todoOrder/todoOrder`
            // })
			let pages = getCurrentPages()
			let prevPage = pages[pages.length - 2];//上级页面

			prevPage.isRefresh=true
			uni.navigateBack()
          }
        })
      })
    },
    //  去执行
    submitExecute(dataTime) {
      let params = {
        updateUid:this.userData.USERID,
        updateName:this.userData.SUERNAME,
        machineId:this.detailId,
        realityIntoTime:dataTime.beginTime,
        realityLeaveTime:dataTime.endTime
      }
      Dialog.confirm({
        message:'是否确认执行'
      }).then(() => {
        this.$api.carryOut(params).then(res => {
          if(res.code == 0) {
			  let pages = getCurrentPages()
			  let prevPage = pages[pages.length - 2];//上级页面

			  prevPage.isRefresh=true
            // uni.navigateTo({
            //   url: `/pages/operationApprove/todoOrder/todoOrder`
            // })
			uni.navigateBack()
          }
        })
      })
    }
  }
};
</script>
<style scoped lang="scss">
.task-monitor-main {
  min-height: 100vh;
  background: #F2F6FA;
  .top-banner {
    width: px2vw(1080);
    height: px2vh(190);
    background: #fff;
    margin-bottom: px2vw(30);
    .left-banner {
      width: px2vw(600);
      margin-top: px2vh(47);
      height: px2vh(98);
      float: left;
      margin-left: px2vh(50);
      .left-banner-title {
        display: block;
        font-size: px2vw(42);
        color: #417ADC;
      }
      .left-banner-time {
        font-size: px2vw(36);
        color: #666;
      }

    }
    .left-state-dsp,
    .left-state-ywc,
    .left-state-jj,
    .left-state-dzx,
    .left-state-ycx {
      width: px2vw(220);
      height: px2vh(80);
      margin-right: px2vh(30);
      margin-top: px2vh(55);
      float: right;
      font-size: px2vw(42);
      font-weight: 700;
      border-radius: px2vw(40);
      text-align: center;
      line-height: px2vh(80);
    }
    .left-state-ywc {
      color: #3CDA68;
      background: rgba(60,218,104,.1);
    }
    .left-state-dsp {
      color: #FFAD0E;
      background: rgba(255,173,14,.1);
    }
    .left-state-jj {
      color: #FF7070;
      background: rgba(255,112,112,.1);
    }
    .left-state-dzx {
      color: #417ADC;
      background: rgba(65,122,220,.1);
    }
    .left-state-ycx {
      color: #8C8C8C;
      background: rgba(140,140,140,.1);
    }
  }
  main {
    width: calc(100% - #{px2vw(60)});
    margin:auto;
    height: calc(100vh - #{px2vh(590)});
    overflow-x: auto;
    .plate-title {
      margin-bottom: px2vh(30);
    }
    .main-top {
      overflow: hidden;
      border-radius: px2vh(20);
      margin-bottom: px2vh(30);
    }
    .operation-info-container {
      .task-assignment-item {
        margin-bottom: px2vh(30);
        overflow: hidden;
        border-radius: px2vh(20);
        .custom-title {
          display: flex;
          align-items: center;

          img {
            width: px2vh(42);
            margin-right: px2vw(29);
          }
        }
        .work-info-container {
          padding: px2vh(62) px2vw(50);
          font-size: px2vw(42);
          color: #666666;
          border-radius: px2vw(20);
          overflow: hidden;
          background-color: #FFFFFF;
          .work-wrap {
            background-color: #FAFAFA;
            padding: px2vh(40) px2vw(50) px2vh(77) px2vw(50);
            border-radius: px2vw(20);
            .remark-text {
              height: px2vh(150);
            }
          }
        }
        .line {
          width: 100vw;
          height: px2vh(30);
          background: #f1f5f9;
        }
        /deep/ .van-field__body {
          .van-field__control--right {
            pointer-events: none;
            // font-size: px2vh(36);
          }

          .van-icon-clear::before {
            // color: #ff4355;
          }
        }

        /deep/ .van-collapse-item__content {
          padding: 0;
        }

        /deep/ .van-cell--large .van-cell__title {
          font-size: px2vw(42);
        }
      }
    }
    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
      margin-top: px2vh(40);
      margin-bottom: px2vh(40);
      .remark-wrap {
        background-color: #FAFAFA;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);

        .remark-text {
          height: px2vh(150);
        }
      }
    }
    .approval-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;

      /deep/ .van-cell__title {
        color: #666;
      }

      /deep/ .van-cell__value {
        color: #333;
      }
    }
    .approval-info-container {
      .van-steps {
        .van-step.van-step--process {
          /deep/.van-icon::before {
            border-radius: 50%;
            color: #417adc;
            background-color: #417adc;
          }
        }
        .van-step {
          /deep/.van-icon::before {
            border: 2px;
            border-radius: 50%;
            color: #417adc;
            background-color: #fff;
          }
          p {
            margin-bottom: 4px;
            color: #ababab;
          }
          p:nth-child(1) {
            display: flex;
            justify-content: space-between;
            //width: px2vw(300);
            color: #333;
          }
          .opinion {
            display: flex;
            span:nth-child(1) {
              min-width: 70px;
            }
          }
        }
      }
    }
  }
  .mainHeight {
    height: calc(100vh - #{px2vh(435)});
  }
  footer {
    height: px2vh(155);
    background: #f2f6fa;
    padding-top: px2vh(45);
    /deep/ .van-button {
      width: calc(100% - #{px2vw(60)});
      margin-left: px2vh(30);
      height: px2vh(120);
      color: #fff;
      background-color: #417ADC;
      border: 1px solid #417ADC;
      border-radius: px2vh(60);
    }
  }
}
</style>
